<template>
  <div>
    <van-grid :column-num="columnNum" :border="border" :icon-size="iconSize">
      <van-grid-item
        :icon="item.img"
        :text="item.title"
        v-for="(item, index) in iconBotton"
        :key="index"
        @click="onClick(item.path)"
      />
    </van-grid>
  </div>
</template>

<script>
import Vue from "vue";
import { Grid, GridItem } from "vant";
Vue.use(Grid);
Vue.use(GridItem);
export default {
  components: {
    Grid,
    GridItem,
  },
  props: {
    iconBotton: {
      type: Array,
      required: true,
    },
    columnNum: {
      type: String || Number,
      default: "4",
    },
    border: {
      type: Boolean,
      default: false,
    },
    iconSize: {
      type: String || Number,
      default: "32px",
    },
  },
  methods: {
    onClick(path) {
        this.$router.pushRouteByQuery(path)
    },
  },
};
</script>

<style>
</style>